Tengo un problema con HTMX en Django. Básicamente tengo dos componentes importantes en la página. Lista de categorías y contenido que se muestra después de hacer clic en la categoría.
Estaba trabajando muy bien con solo htmx estándar "listo para usar". Pero comencé a tener problemas cuando quería agregar una clase css active en el enlace de categoría después de hacer clic en él (para mostrarle al usuario dónde se encuentra actualmente).
Hice muchos experimentos con hx-swap-oob y hx-swap pero lo único que funcionó fue esto:
(es la parte más relevante del código)
<div class="col-sm-4"> <div class="card"> <div class="card-body" hx-boost="true" hx-target="#manual_results"> <div id="manual_categories"> {% include 'partials/manual_categories.html' %} </div> </div> </div> </div> <div class="col-sm-8"> <div id="manual_results"> {% include 'partials/manual_entries_list.html' %} </div> </div> y en manual_entries_list.html :
<some html results> <div id="manual_categories" hx-swap-oob="true"> {% include 'partials/manual_categories.html' %} </div>Cada categoría tiene una declaración if simple en el código de la plantilla de django que verifica si está seleccionada (según la ruta de la URL).
Y está funcionando, la cosa es que, en la primera solicitud, las categorías se representan dos veces (lo cual es lógico ya que tengo 2 inclusiones en el mismo HTML). Después de seleccionar una categoría, todo vuelve a la normalidad porque HTMX "comienza a comprender lo que está sucediendo" y cambia las categorías de manual_entries_list.html a nuestra página principal.
Y como dije, funciona, modifiqué manual_entries_list.html a:
<some html results> <div class="set_size_to_0px"> <div id="manual_categories" hx-swap-oob="true"> {% include 'partials/manual_categories.html' %} </div> </div>Por lo tanto, siempre es invisible (por lo que solo tendré un conjunto de categorías visible).
La cosa es que es un truco obvio. Estoy seguro de que debe haber una mejor manera de resolver este problema, pero no puedo encontrarla.
(Incluso traté de hacerlo con javascript simple, la cuestión es que las categorías se representan en un bucle for, por lo que es prácticamente imposible obtener las identificaciones correctamente, etc.)
¿Podría alguien ayudarme, por favor?
La forma más fácil de evitar este problema es detectar la solicitud HTMX en la función de vista, pasar este estado a sus plantillas y mostrar contenido HTMX solo si es necesario. HTMX agregará un encabezado HX-Request: true a cada solicitud.
Para la detección, puede usar el paquete Django-HTMX que proporciona una variable request.htmx en sus funciones de vista que será True si la solicitud proviene de HTMX. O si quieres comprobarlo manualmente:
def my_view(request): is_htmx = request.headers.get('HX-Request') == 'true' return render(request, 'my_template.html', {'is_htmx': is_htmx}) Después de eso, en la plantilla manual_entries_list.html , incluya cosas relacionadas con HTMX solo en las solicitudes de HTMX:
<some html results> {% if is_htmx %} <div id="manual_categories" hx-swap-oob="true"> {% include 'partials/manual_categories.html' %} </div> {% endif %}